<template>
  <div id="app">
    <Header></Header>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './components/header/header.vue'
  import Footer from './components/footer/footer.vue'
  export default {
    components: {
      Footer,
      Header
    },
    name: 'App',
    watch: { //使用watch 监听$router的变化
      $route(to, from) {
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if (to.meta.index > from.meta.index) {
          //设置动画名称
          this.transitionName = 'slide-left';
        } else {
          this.transitionName = 'slide-right';
        }
      }
    },
    data() {
      return {
        transitionName: ""
      }
    }
  }
</script>

<style>
  body {
    padding: 0;
    margin: 0;
    font-size: 15px;
  }

  input {
    border: 0;
    outline: none;
    background: transparent;
  }

  #app {
    font-family: PingFang SC, 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #F7F7F7;
    min-height: 100vh;
    padding-bottom: 40px;
    box-sizing: border-box;
    
  }

  .view {
    width: 100%;
    position: absolute;
  }

  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 200ms ease-in;
    position: absolute;
  }

  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
